<template>
	<div class="video">
	  <div class="logined">
		<!-- 标签导航 -->
		<TagsNav :all-tag="allTag" :hot-tag="hotTag" @tagClick="tagClick" />
		<!-- 视频列表 -->
		<div class="video-list" v-if="videoList.length !== 0">
		  <VideoList :videolist="videoList" />
		</div>
		<div class="novideo" v-else>
		  <el-empty description="暂无视频" :image-size="200"></el-empty>
		</div>
	  </div>
	  <!-- <div class="nologin" v-if="!isLogin">
		<el-empty description="登录后才能查看" :image-size="200"></el-empty>
	  </div> -->
	</div>
  </template>
  
  <script setup>
/* 网络请求 */
import { geAllVideoTags, geHotVideoTags, getGroupVideoList } from "@/network/recvideo/recvideo";
import { onMounted, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
/* 子组件 */
import TagsNav from "@/components/content/TagsNav.vue";
import VideoList from "@/components/content/videolist/VideoList.vue";


import { ref } from "vue";

const allTag = ref([]);
const hotTag = ref([]);
const videoList = ref([{}]);
const tagId = ref(""); // 标签id
const offset = ref(0);


const store = useStore();

// if (!store.state.isLogin) {
//   // 如果没有登录，显示警告信息
//   const { $message } = useApp();  // 假设你在 setup 中可以使用 $message
//   $message({
//     type: "warning",
//     message: "登录后才能查看",
//     showClose: true,
//     center: true,
//   });
//   return;
// }

/* 获取视频标签 */
// const geAllVideoTagsBy = async () => {
//   try {
//     const res = await geAllVideoTags();
//     allTag.value = res.data.data;
//   } catch (error) {
//     console.error("获取全部视频标签失败", error);
//   }
// };

const geHotVideoTagsBy = async () => {
  try {
    const res = await geHotVideoTags();
    hotTag.value = res.data.data;
    tagId.value = hotTag.value[0].id; // 默认选中第一个热门标签
    // 获取视频列表
    getGroupVideoListBy(tagId.value);
  } catch (error) {
    console.error("获取热门视频标签失败", error);
  }
};

/* 获取分类视频列表 */
const getGroupVideoListBy = async (id) => {
  try {
    const res = await getGroupVideoList(id, offset.value);
    if (res.data.hasmore) {
      videoList.value.push(...res.data.datas);
      offset.value += 1;
      if (offset.value < 4) {
        getGroupVideoListBy(tagId.value);
      }
    }
  } catch (error) {
    console.error("获取分类视频列表失败", error);
  }
};

/* 标签点击事件 */
const tagClick = (tagName, id) => {
  offset.value = 0;
  videoList.value = []; // 清空视频列表
  tagId.value = id; // 保存标签id
  getGroupVideoListBy(id);
};

/* 滚动事件监听 */
const more = () => {
  const view = document.querySelector(".view");
  if (Math.ceil(view.scrollTop) + view.clientHeight >= view.scrollHeight) {
    // 滚动卷去的高度 + 当前可视高度 >= 总高度，即代表滑动到底部
    getGroupVideoListBy(tagId.value);
  }
};



// 页面加载时获取标签数据
onMounted(() => {
  geAllVideoTagsBy();
  geHotVideoTagsBy();
  document.querySelector(".view").addEventListener("scroll", more);
});

// 页面卸载时移除滚动事件监听
onBeforeUnmount(() => {
  document.querySelector(".view").removeEventListener("scroll", more);
});
</script>
  

<style lang="less" scoped>
.video-list {
	margin-top: 30px;
}
</style>
